<template>
  <div id="blog">
    <!-- 点击显示博客 -->
    <div class="light">
    </div>
    <div 
      :class="{'book':true,
        'has3d':true,
        'show':!isShow}" 
      id="book" >
      <div 
        class="content"
        @click="look">
        <div :class="{'contents':true,'fadeIn':isOpen}">
          <p>博客：{{this.article.title}}</p>
          <p>日期：{{this.article.time}}</p>
          <p>简介：{{this.article.content}}</p>
        </div>
      </div>
      <div :class="{'cover':true,
          'has3d':true,
          'open':isOpen,
          'close':!isOpen}" 
        id="cover"
        @click="handle">
          <img :src="this.article.img"></img>
      </div>
    </div>




    <div class="box" 
      v-for="(item,index) in messages" 
      :key="index"
      @click="showArticle(item)">
      <div class="img">
        <img :src="item.img"></img>
      </div>
      <div class="message">
        <p>{{item.title}}</p>
        <span>{{item.time}}</span>
        <div class="operate">
          <i class="el-icon-view">{{item.see}}</i>
          <i class="el-icon-star-off" v-if="item.love == 0">{{item.love}}</i>
          <i class="el-icon-star-on" v-if="item.love > 0">{{item.love}}</i>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default{
    data(){
      return{
        isShow:false, //书本显示与否
        isOpen:false,//书本是否打开
        article:{},
        active:0,
        width:0,
        rows:0,
        messages:[{
            //直接写路径是不能被解析的，可以通过require实现
            img:require('@/assets/img/blog_bg/6.png'),
            width:250,
            height:250,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'7',
            love:'12',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:750,
            height:500,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'3',
            love:'6',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:250,
            height:250,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          },{
            img:require('@/assets/img/blog_bg/6.png'),
            width:240,
            height:240,
            title:'我的博客',
            time:'2015-3-2',
            content:'啥也没有啥也没有。。。。',
            see:'0',
            love:'0',
            tags:['js','css'],
          }]
      }
    },
    created(){
    },
    mounted(){

      this.message = this.messages.forEach((el, i) => {
        let newHeight = 200 * el.height / el.width //按照缩放比例图片的高
        el.height = newHeight;
      })
      this.rows = Math.floor(this.message / 4)
    },
    methods:{
      //打开某篇文章
      showArticle(article){
        this.isShow = true
        this.article = article
      },
      //翻开关上书本
      handle(){
        let cover = document.getElementById('cover')
        if(!this.isOpen){
          this.isOpen = true
        }else{   
          this.isOpen = false
        }
      },
      //查看文章详情
      look(){
        console.log('lookk')
      } 
    },
    components:{
    }
  }
</script>

<style scoped>
  #blog{
    width:100%;
  }
  /*关于书本的样式*/
  .show{
    display:none;
  }
  .open{
    transform:rotateY(-120deg);
  }
  .close{
    transform:rotateY(0deg);
  }
  .has3d{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin:left;
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -o-transform-origin:left;
    transform-origin:left;
  }
  .book{
    width:50%;
    height:500px;
    margin:50px 30%;
    position:absolute;
    z-index:5;
  }
  .cover{
    width:100%;
    height:100%; 
    position:absolute;
    left:0;
    top:0;
    transition:3s;
    border:3px solid #ccc;
    background-color:white;
  }
  .content{
    width:100%;
    height:100%; 
    position:absolute;
    left:0;
    top:0; 
    border:3px solid #ccc; 
    background-color:white;
  }
  /*实现内容的淡入淡出*/
  .contents{
    opacity:0;
  }
  .fadeIn{
    opacity:1;
    transition: all .5s ease-in 3s;
  }


  .light{
    background-color:black;
    width:100%;
    height:100%;
    z-index:4;
    position:relative;
  }






  .img img{
    width:100%;
    height:100%;
  }
  .box{
    width:20%;
    border:1px solid #aaa;
    margin-top:10px;
    display:inline-block;
    margin-right:15px;
  }
  .box img{
    width:100%;
    height:200px;
  }
  .message{
    height:60px;
    padding-left:6px;
    position:relative;
  }

  .message span{
    color:#aaa;
    font-size:12px;
  }
  .operate{
    position:absolute;
    bottom:2px;
    right:5px;
  }
  .operate i{
    margin-right:4px;
  }
</style>